import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { Link } from 'react-router-dom'
import { PublicService } from '../../../transfer/service/PublicService'
import { Alert } from 'antd'

export default function LoginForm() {
    const [account, setAccount] = useState('')
    const [password, setPassword] = useState('')
    const [isError, setIsError] = useState(false)

    useEffect(() => {
        new PublicService()
    }, [])

    const login = () => {
        const accountPattern = /^[a-z0-9_]+$/
        const passwordPattern = /^[A-Za-z0-9]{6,40}$/

        if (!accountPattern.test(account) || !passwordPattern.test(password)) {
            setIsError(true)
        }

        if (accountPattern.test(account) && passwordPattern.test(password)) {
            new PublicService().login({
                account: account,
                password: password
            })
        }
    }

    return (
        <div className={style.container}>
            {isError ? (
                <Alert
                    message={'错误'}
                    description={'信息填写错误'}
                    type={'error'}
                    showIcon={true}
                    closable={true}
                    afterClose={() => {
                        setIsError(false)
                    }}
                    style={{
                        position: 'fixed'
                    }}
                />
            ) : (
                ''
            )}

            <div className={style.content}>
                <Link to={'/editorial'} className={style.main__title}>
                    LineView
                </Link>
                <span className={style.title}>登录</span>
                <span className={style.sub__title}>欢迎回来</span>
                <div className={style.form}>
                    <div className={style.item}>
                        <span>账号</span>
                        <input
                            type="text"
                            value={account}
                            onChange={e => {
                                setAccount(e.target.value)
                            }}
                        />
                    </div>
                    <div className={style.item}>
                        <div className={style.item__title}>
                            <span>密码</span>
                            <Link to={'/account/forget'}>忘记你的密码了？</Link>
                        </div>
                        <div className={style.password}>
                            <input
                                type="password"
                                value={password}
                                onChange={e => {
                                    setPassword(e.target.value)
                                }}
                            />
                        </div>
                    </div>
                    <div
                        className={style.btn}
                        onClick={() => {
                            login()
                        }}>
                        <span>登录</span>
                    </div>
                </div>
                <p>
                    没有属于你的账号。还不赶快<Link to={'/account/join'}>加入我们</Link>
                    {'。'}
                </p>
            </div>
        </div>
    )
}
